<template>
    <div>
        <el-card class="power-box">
            <template #header>
                <div class="card-header">
                    <span>权限设置</span>
                </div>
            </template>
            <el-row type="flex" justify="space-between" class="rowDiv">
                <el-col :span="6">选择所需权限&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-checkbox @change="checkAllChange(0,0,0,0)"
                                 v-model="state.globalCheckAll"
                    >全选
                    </el-checkbox>
                </el-col>
                <el-col :span="4" v-if="state.powerType==1" style="margin-right: auto">
                    <el-checkbox v-model="state.allPurPriceChecked"
                    >查看所有进价
                    </el-checkbox>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="submit_create">保存</el-button>
                </el-col>
            </el-row>
            <div class="limitDiv">
                <div class="limit-item" v-for="(aitem,index) in powerList" :key="index">
                    <div class="item-left">
                        <el-checkbox v-model="aitem.selected"
                                     @change="checkAllChange(1,0,index,0)">
                            {{aitem.name}}
                        </el-checkbox>
                    </div>
                    <div class="item-right">
                        <div class="childDiv" v-for="(bitem,_index) in aitem.item" :key="_index">
                            <div class="child-title">
                                <el-checkbox v-model="bitem.selected"
                                             @change="checkAllChange(2,index,_index,bitem.id)"
                                >
                                    <b>{{bitem.name}}</b></el-checkbox>
                            </div>
                            <div class="child-item">
                                <div v-for="(citem,$index) in bitem.item" :key="$index">
                                    <el-checkbox v-model="citem.selected"
                                                 @change="CheckedChange(_index, aitem.item,citem.id, bitem.item, $event,index)"
                                    >{{citem.name}}
                                    </el-checkbox>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>


<script>
    import {reactive, watch, ref} from "vue";

    export default {
        components: {},
        props: {
            powerList: Array,
            powerType: Number,
            operationId: {type: Number}
        },
        setup(props, {emit}) {
            console.log('props---', props.powerList[0].name)
            let operationId = ref(0);
            let powerList = ref([]);
            let state = reactive({
                powerList: props.powerList,
                globalCheckAll: false,
                powerType: props.powerType, //1:员工权限设置  2：职位权限设置
                allPurPriceChecked: false, //查看所有进价
            });
            watch(() => {
                operationId.value = props.operationId;
                powerList.value = props.powerList;
                state.globalCheckAll = false
                console.log('watch----', powerList.value[0].name)
            });

            /**设置上级复选框是否全选
             level:当前选中的级别  0：全局  1：列表中的第一级 2：列表中的第二级
             parent_index:父级索引
             index:本级索引
             thisId:本级id
             **/
            function checkAllChange(level, parent_index, index, thisId) {
                var list = powerList.value
                if (level == 0) {
                    for (var i = 0; i < list.length; i++) {
                        var item = list[i];
                        item.selected = state.globalCheckAll
                        for (var a = 0; a < item.item.length; a++) {
                            var aItem = item.item[a];
                            aItem.selected = state.globalCheckAll
                            for (var b = 0; b < aItem.item.length; b++) {
                                var bItem = aItem.item[b];
                                bItem.selected = state.globalCheckAll
                            }
                        }
                    }
                } else if (level == 1) {
                    var item = list[index];
                    let selected = item.selected
                    for (var a = 0; a < item.item.length; a++) {
                        var aItem = item.item[a];
                        aItem.selected = selected
                        for (var b = 0; b < aItem.item.length; b++) {
                            var bItem = aItem.item[b];
                            bItem.selected = selected
                        }
                    }
                    if (state.powerType == 2) {
                        globalCheckedFun()
                    }
                } else if (level == 2) {
                    var item = list[parent_index].item[index];
                    let selected = item.selected
                    for (var i = 0; i < item.item.length; i++) {
                        var iItem = item.item[i];
                        iItem.selected = selected
                    }
                    CheckedChange(parent_index, list, thisId, list[parent_index].item, selected, parent_index)
                }
            }

            /**设置上级复选框是否全选
             topIndex:上级索引
             topItem:上级数据
             thisId:本级id
             thisItem:本级数据
             e:当前点击元素是否选中
             parent_top_index:顶级索引--最外层索引
             **/
            function CheckedChange(topIndex, topItem, thisId, thisItem, e, parent_top_index) {
                var checkCount = 0, len = thisItem.length
                for (var i = 0; i < len; i++) {
                    if (thisId == thisItem[i].id) thisItem[i].selected = e
                    if (thisItem[i].selected == true) checkCount++
                }
                topItem[topIndex].selected = checkCount == len ? true : false
                //判断顶级全选是否给予选中状态
                var list = powerList.value //所有全选数据
                var parentTopItem = list[parent_top_index] //当前被选中的是隶属于哪个顶级
                var topLen = parentTopItem.item.length  //当前被选中的顶级下有多少个子集
                var childCheckCount = 0 //当前被选中的顶级中 有多少子集被选中
                for (var a = 0; a < parentTopItem.item.length; a++) {
                    var pItem = parentTopItem.item[a]
                    if (pItem.selected == true) childCheckCount++
                }
                parentTopItem.selected = childCheckCount == topLen ? true : false
                if (state.powerType == 2) {
                    globalCheckedFun()
                }
            }

            //判断全局中的 全选 是否选中
            function globalCheckedFun() {
                var list = powerList.value //所有全选数据
                var len = list.length
                var childLen = 0
                for (var a = 0; a < list.length; a++) {
                    var item = list[a]
                    if (item.selected == true) childLen++
                }
                state.globalCheckAll = childLen == len ? true : false
            }

            //获取被选中的id
            function getAllCheckedArr() {
                let arr = [];
                for (var i in powerList.value) {
                    var item = powerList.value[i];
                    for (var a = 0; a < item.item.length; a++) {
                        var aItem = item.item[a];
                        for (var b = 0; b < aItem.item.length; b++) {
                            var bItem = aItem.item[b];
                            if (bItem.selected) {
                                arr.push(bItem.id)
                            }
                        }
                    }
                }
                //是否判断 全选传值为空
                // arr = state.globalCheckAll == true ? [] : arr
                return arr
            }

            //保存
            function submit_create() {
                var type = state.powerType  //1:员工权限设置  2：职位权限设置
                var checkedArr = getAllCheckedArr()
                var id = operationId.value
                var allPurPrice = state.allPurPriceChecked  //查看所有进价
                console.log('查看所有进价' + allPurPrice, 'type--', type, 'id--' + id, checkedArr)
            }

            return {
                state,
                checkAllChange,
                CheckedChange,
                submit_create,
                operationId,
                powerList
            };
        },
    };
</script>
<style lang="scss" scoped>

    .power-box {
        padding: 20px 30px 40px 30px;
        .rowDiv {
            padding: 10px;
            box-sizing: border-box;
        }
        .limitDiv {
            border: 1px solid gainsboro;
            border-radius: 4px;
            margin: 0 10px;
            .limit-item {
                display: flex;
                box-sizing: border-box;
                border-bottom: 1px solid gainsboro;
                .item-left {
                    width: 20%;
                    display: flex;
                    padding: 10px;
                    align-items: center;
                    border-right: 1px solid gainsboro;
                }
                .item-right {
                    width: 80%;
                    padding: 10px;
                    .childDiv {
                        margin-bottom: 10px;
                    }
                    .childDiv:last-child {
                        margin-bottom: 0px;
                    }
                    .child-item {
                        display: flex;
                        flex-wrap: wrap;
                    }
                }
            }
        }
        /deep/ .el-checkbox:last-of-type {
            margin-right: 20px;
        }
    }

</style>